<script setup lang="ts">
import EchartBar from '@/components/Echart/Bar/BarChart.vue'
import * as echarts from 'echarts'
import { reactive } from 'vue'
import { storeToRefs } from 'pinia'
import { useHomeStore } from '@/stores/module/home'
const homeStore = useHomeStore() // 创建store实例
const { homeGlobalMemberLevelCounts } = storeToRefs(homeStore)
//遍历接口数据拿到想要的数据
const getAreaValue = () => {
  const areaValue = []
  const areaName = []
  homeGlobalMemberLevelCounts.value.info.forEach((item) => {
    areaValue.push(item.value)
    areaName.push(item.name)
  })
  return areaValue
}
const getAreaName = () => {
  const areaName = []
  homeGlobalMemberLevelCounts.value.info.forEach((item) => {
    areaName.push(item.name)
  })
  return areaName
}
// 调整px到合适的大小
const changePixelSize = (px: number) => {
  // 获取当前屏幕宽度
  const width = document.body.clientWidth
  let res = (px / 1920) * width
  // 保留整数
  return parseInt(res.toFixed(0))
}
//echarts配置项
const chartData = reactive({
  name: 'countryMemberLevelCounts',

  grid: {
    left: '3%',
    right: '3%',
    bottom: '5%',
    top: '10%',
    containLabel: true,
  },
  stack: 'total',
  xAxis: {
    type: 'category',
    data: getAreaName(),
    axisTick: {
      show: false,
    },
    axisLabel: {
      color: '#fff', // 设置 X 轴标签字体颜色

      interval: 0, // 强制显示所有标签
      fontSize: changePixelSize(14),
      margin: changePixelSize(5), // 调整标签与轴线的距离
    },
  },
  yAxis: {
    type: 'value',
    axisLine: {
      show: true,
    },
    splitLine: {
      show: false,
    },
    axisLabel: {
      fontSize: changePixelSize(12),
      color: '#FFFFFF',
      margin: changePixelSize(5), // 调整标签与轴线的距离
    },
  },

  series: [
    {
      type: 'bar',
      stack: 'total',
      data: getAreaValue(),
      barWidth: changePixelSize(20),
      emphasis: {
        focus: 'series',
      },
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          { offset: 0, color: '#5640e2' },
          { offset: 0.3, color: '#5640e2' },
          { offset: 1, color: '#0abafe' },
        ]),
      },
    },
  ],
})
</script>
<template>
  <el-carousel-item>
    <card-box>
      <template v-slot:title>
        <h1>{{ homeGlobalMemberLevelCounts.title }}</h1>
      </template>
      <EchartBar :chart-data="chartData"></EchartBar>
    </card-box>
  </el-carousel-item>
</template>
